<template>
  <view class="refund-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <view class="navbar-title">
        <text class="title-text">退款/退货</text>
      </view>
      <view class="navbar-right">
        <u-icon name="more-dot-fill" size="20" color="#333" @click="showMoreOptions"></u-icon>
        <u-icon name="minus" size="20" color="#333" @click="minimizeWindow"></u-icon>
        <u-icon name="checkmark-circle" size="20" color="#333" @click="completeSettings"></u-icon>
      </view>
    </view>

    <!-- 退款订单列表内容 -->
    <view class="refund-content">
      <!-- 退款订单列表 -->
      <view class="refund-list" v-if="refundList.length > 0">
        <view 
          class="refund-item" 
          v-for="(refund, index) in refundList" 
          :key="refund.id"
          @click="goToRefundDetail(refund)"
        >
          <!-- 订单头部 -->
          <view class="order-header">
            <view class="order-info">
              <text class="order-number">订单号：{{ refund.orderNumber }}</text>
              <text class="order-time">{{ refund.createTime }}</text>
            </view>
            <view class="refund-status" :class="{'status-refunded': refund.status === 'refunded', 'status-processing': refund.status === 'processing', 'status-rejected': refund.status === 'rejected'}">
              <text class="status-text">{{ getStatusText(refund.status) }}</text>
            </view>
          </view>

          <!-- 商品信息 -->
          <view class="product-info">
            <view class="product-image">
              <image 
                :src="refund.productImage" 
                mode="aspectFill"
                class="product-img"
              ></image>
            </view>
            <view class="product-details">
              <view class="product-name">{{ refund.productName }}</view>
              <view class="product-spec">{{ refund.productSpec }}</view>
              <view class="product-price">
                <text class="price-symbol">¥</text>
                <text class="price-value">{{ refund.refundAmount }}</text>
                <text class="quantity">x{{ refund.quantity }}</text>
              </view>
            </view>
          </view>

          <!-- 退款信息 -->
          <view class="refund-info">
            <view class="refund-reason">
              <text class="label">退款原因：</text>
              <text class="value">{{ refund.refundReason }}</text>
            </view>
            <view class="refund-amount">
              <text class="label">退款金额：</text>
              <text class="value amount">¥{{ refund.refundAmount }}</text>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="action-buttons">
            <view class="action-btn secondary" @click.stop="viewLogistics(refund)">
              <text class="btn-text">查看物流</text>
            </view>
            <view class="action-btn primary" @click.stop="contactService(refund)">
              <text class="btn-text">联系客服</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 - 暂无退款/售后相关订单 -->
      <view class="empty-state" v-else>
        <view class="empty-illustration">
          <!-- 纸箱图标 -->
          <view class="box-icon">
            <view class="box-body">
              <view class="box-top"></view>
              <view class="box-front"></view>
              <view class="box-side"></view>
            </view>
            <!-- 悲伤表情 -->
            <view class="sad-face">
              <view class="eye eye-left"></view>
              <view class="eye eye-right"></view>
              <view class="mouth"></view>
            </view>
            <!-- 装饰星星 -->
            <view class="star star-1"></view>
            <view class="star star-2"></view>
            <view class="star star-3"></view>
            <view class="star star-4"></view>
            <view class="star star-5"></view>
          </view>
        </view>
        <view class="empty-text">还没有退款/售后相关订单~</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'RefundList',
  data() {
    return {
      refundList: [] // 退款订单列表数据
    }
  },
  onLoad() {
    // 页面加载时获取退款订单数据
    this.getRefundList()
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 显示更多选项
    showMoreOptions() {
      uni.showActionSheet({
        itemList: ['退款说明', '售后政策', '帮助'],
        success: (res) => {
          console.log('选择了第' + (res.tapIndex + 1) + '个按钮')
          if (res.tapIndex === 0) {
            this.showRefundPolicy()
          }
        }
      })
    },
    
    // 最小化窗口
    minimizeWindow() {
      uni.showToast({
        title: '窗口已最小化',
        icon: 'none'
      })
    },
    
    // 完成设置
    completeSettings() {
      uni.showToast({
        title: '设置完成',
        icon: 'success'
      })
      setTimeout(() => {
        this.goBack()
      }, 1500)
    },
    
    // 获取退款订单列表
    getRefundList() {
      // 这里模拟获取退款订单数据
      // 实际项目中应该调用API接口
      setTimeout(() => {
        // 模拟空数据 - 没有退款订单
        this.refundList = []
        
        // 如果要显示模拟数据，可以取消注释下面的代码
        /*
        this.refundList = [
          {
            id: 1,
            orderNumber: 'DD20231201001',
            createTime: '2023-12-01 14:30:25',
            status: 'refunded', // refunded: 已退款, processing: 处理中, rejected: 已拒绝
            productName: 'Apple iPhone 15 Pro Max 256GB 深空黑色',
            productSpec: '256GB 深空黑色',
            productImage: '/static/images/products/iphone15.jpg',
            quantity: 1,
            refundAmount: '8999.00',
            refundReason: '商品质量问题'
          },
          {
            id: 2,
            orderNumber: 'DD20231128002',
            createTime: '2023-11-28 09:15:10',
            status: 'processing',
            productName: 'Nike Air Jordan 1 Retro High OG',
            productSpec: '42码 白色',
            productImage: '/static/images/products/jordan1.jpg',
            quantity: 1,
            refundAmount: '1299.00',
            refundReason: '尺码不合适'
          }
        ]
        */
      }, 500)
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const statusMap = {
        'refunded': 'status-refunded',
        'processing': 'status-processing',
        'rejected': 'status-rejected'
      }
      return statusMap[status] || 'status-processing'
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'refunded': '已退款',
        'processing': '处理中',
        'rejected': '已拒绝'
      }
      return statusMap[status] || '处理中'
    },
    
    // 跳转到退款详情
    goToRefundDetail(refund) {
      console.log('跳转到退款详情:', refund)
      uni.navigateTo({
        url: `/pages/refund/refund-detail?id=${refund.id}`
      })
    },
    
    // 查看物流
    viewLogistics(refund) {
      console.log('查看物流:', refund)
      uni.navigateTo({
        url: `/pages/logistics/logistics-detail?orderId=${refund.orderNumber}`
      })
    },
    
    // 联系客服
    contactService(refund) {
      console.log('联系客服:', refund)
      uni.navigateTo({
        url: '/pages/customer-service/customer-service'
      })
    },
    
    // 显示退款说明
    showRefundPolicy() {
      uni.showModal({
        title: '退款说明',
        content: '1. 退款申请提交后，我们将在1-3个工作日内处理\n2. 退款将原路返回到您的支付账户\n3. 如有疑问，请联系客服',
        showCancel: false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.refund-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
  
  .navbar-left {
    width: 60rpx;
    display: flex;
    align-items: center;
  }
  
  .navbar-title {
    .title-text {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
    }
  }
  
  .navbar-right {
    display: flex;
    align-items: center;
    gap: 20rpx;
  }
}

.refund-content {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx;
}

.refund-list {
  .refund-item {
    background-color: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      .order-info {
        .order-number {
          font-size: 28rpx;
          color: #333333;
          font-weight: 500;
          display: block;
          margin-bottom: 8rpx;
        }
        
        .order-time {
          font-size: 24rpx;
          color: #999999;
        }
      }
      
      .refund-status {
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
        
        &.status-refunded {
          background-color: #e8f5e8;
          color: #52c41a;
        }
        
        &.status-processing {
          background-color: #fff7e6;
          color: #fa8c16;
        }
        
        &.status-rejected {
          background-color: #fff1f0;
          color: #ff4d4f;
        }
      }
    }
    
    .product-info {
      display: flex;
      margin-bottom: 20rpx;
      
      .product-image {
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
        border-radius: 8rpx;
        overflow: hidden;
        background-color: #f8f8f8;
        
        .product-img {
          width: 100%;
          height: 100%;
        }
      }
      
      .product-details {
        flex: 1;
        
        .product-name {
          font-size: 28rpx;
          color: #333333;
          line-height: 1.4;
          margin-bottom: 8rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        
        .product-spec {
          font-size: 24rpx;
          color: #666666;
          margin-bottom: 8rpx;
        }
        
        .product-price {
          display: flex;
          align-items: center;
          
          .price-symbol {
            font-size: 24rpx;
            color: #ff4444;
            margin-right: 4rpx;
          }
          
          .price-value {
            font-size: 28rpx;
            font-weight: 500;
            color: #ff4444;
            margin-right: 12rpx;
          }
          
          .quantity {
            font-size: 24rpx;
            color: #999999;
          }
        }
      }
    }
    
    .refund-info {
      background-color: #f8f8f8;
      padding: 20rpx;
      border-radius: 8rpx;
      margin-bottom: 20rpx;
      
      .refund-reason, .refund-amount {
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          font-size: 24rpx;
          color: #666666;
          width: 120rpx;
        }
        
        .value {
          font-size: 24rpx;
          color: #333333;
          flex: 1;
          
          &.amount {
            color: #ff4444;
            font-weight: 500;
          }
        }
      }
    }
    
    .action-buttons {
      display: flex;
      gap: 20rpx;
      
      .action-btn {
        flex: 1;
        height: 72rpx;
        border-radius: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        
        &.secondary {
          background-color: #f8f8f8;
          border: 1rpx solid #e0e0e0;
          
          .btn-text {
            color: #666666;
          }
        }
        
        &.primary {
          background-color: #ff4444;
          
          .btn-text {
            color: #ffffff;
          }
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 100rpx 30rpx;
  
  .empty-illustration {
    position: relative;
    width: 300rpx;
    height: 300rpx;
    margin-bottom: 40rpx;
    
    .box-icon {
      position: relative;
      width: 200rpx;
      height: 200rpx;
      margin: 0 auto;
      
      .box-body {
        position: relative;
        width: 100%;
        height: 100%;
        
        .box-top {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 40rpx;
          background-color: #e0e0e0;
          border: 2rpx solid #999999;
          border-radius: 8rpx 8rpx 0 0;
        }
        
        .box-front {
          position: absolute;
          top: 40rpx;
          left: 0;
          width: 100%;
          height: 160rpx;
          background-color: #f5f5f5;
          border: 2rpx solid #999999;
          border-top: none;
        }
        
        .box-side {
          position: absolute;
          top: 40rpx;
          right: -20rpx;
          width: 20rpx;
          height: 160rpx;
          background-color: #e8e8e8;
          border: 2rpx solid #999999;
          border-left: none;
          transform: skewY(-15deg);
        }
      }
      
      .sad-face {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80rpx;
        height: 60rpx;
        
        .eye {
          position: absolute;
          top: 10rpx;
          width: 12rpx;
          height: 12rpx;
          background-color: #666666;
          border-radius: 50%;
          
          &.eye-left {
            left: 20rpx;
          }
          
          &.eye-right {
            right: 20rpx;
          }
        }
        
        .mouth {
          position: absolute;
          bottom: 10rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 30rpx;
          height: 8rpx;
          border: 2rpx solid #666666;
          border-top: none;
          border-radius: 0 0 30rpx 30rpx;
        }
      }
      
      .star {
        position: absolute;
        width: 8rpx;
        height: 8rpx;
        background-color: #ffd700;
        border-radius: 50%;
        animation: twinkle 2s infinite;
        
        &.star-1 {
          top: 20rpx;
          left: 30rpx;
          animation-delay: 0s;
        }
        
        &.star-2 {
          top: 40rpx;
          right: 40rpx;
          animation-delay: 0.4s;
        }
        
        &.star-3 {
          top: 80rpx;
          left: 20rpx;
          animation-delay: 0.8s;
        }
        
        &.star-4 {
          top: 120rpx;
          right: 30rpx;
          animation-delay: 1.2s;
        }
        
        &.star-5 {
          top: 160rpx;
          left: 50%;
          animation-delay: 1.6s;
        }
      }
    }
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999999;
    text-align: center;
  }
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}
</style>